<template>
  <el-tabs v-model="activeTab" @tab-click="handleClick">
    <el-tab-pane name="rectify" lazy>
      <span slot="label"><i class="el-icon-s-release"></i> 纠违详情</span>
      <rectify-table :client="client" :range="range" />
    </el-tab-pane>
    <el-tab-pane name="inspect" lazy>
      <span slot="label"><i class="el-icon-s-order"></i> 检查详情</span>
      <inspect-table :client="client" :range="range" />
    </el-tab-pane>

    <el-tab-pane name="inspectSummary" lazy>
      <span slot="label"><i class="el-icon-s-data"></i> 检查评分</span>
      <inspect-chart :client="client" :range="range" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { getDateRange } from "@/utils/date.js";
import RectifyTable from "./components/RectifyTable";
import InspectTable from "./components/InspectTable";
import InspectChart from "./components/InspectChart";
export default {
  components: {
    RectifyTable,
    InspectTable,
    InspectChart,
  },
  computed: {
    client() {
      return this.$store.state.summary.attention.clientStroked;
    },
    type() {
      return this.$store.state.summary.attention.detailType;
    },
    range() {
      return this.getDateRange({
        type: this.$store.state.summary.attention.rangeSelected,
      });
    },
  },
  data() {
    return {
      activeTab: "",
    };
  },
  methods: {
    getDateRange,
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    this.activeTab = this.type;
  },
};
</script>
